<template>
  <div>
    <div style="display: flex;justify-content: space-between;width: 100%;margin: 5px">
      <div>
        <span style="font-size:15px">请选择站点类型</span>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span style="font-size:15px">请选择站点名称</span>
          <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span style="font-size:15px">请选择起止日期</span>
        <el-date-picker
          v-model="beginTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
       </div>
      <el-button type="primary" style="margin-right: 15px">查询</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="站点名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="站码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="平均流量">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: 1,
      value2: "61620400",
      tableData: [
        {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      options1: [
        {
        value: 1,
        label: '雨量站'
      }, {
        value: 2,
        label: '水文站'
      }, {
        value: 3,
        label: '水位站'
      }],
      beginTime: [new Date(),new Date()],
      options2: [
        {
          value: "61620400",
          label: '嘉鱼'
        }, {
          value: "61621200",
          label: '常收畈'
        }, {
          value: "61625000",
          label: '厦铺'
        },
        {
          value: "61607850",
          label: '横石'
        }, {
          value: "61627000",
          label: '万家'
        }, {
          value: "61737000",
          label: '沙墩'
        },
        {
          value: "61738000",
          label: '路口'
        }, {
          value: "61745000",
          label: '埠头'
        }, {
          value: "61745500",
          label: '黄沙'
        },
        {
          value: "61746500",
          label: '王家庄'
        }, {
          value: "61747500",
          label: '余码头'
        }, {
          value: "61748000",
          label: '柏墩'
        },
        {
          value: "61749500",
          label: '大桥'
        }, {
          value: "61750000",
          label: '十好桥'
        }, {
          value: "61751500",
          label: '三洲'
        },
        {
          value: "61752500",
          label: '金口'
        }, {
          value: "0",
          label: '南川水库'
        }, {
          value: "61749000",
          label: '四门楼'
        },
        {
          value: "61751000",
          label: '贺胜桥'
        }, {
          value: "61752000",
          label: '法泗洲'
        },
        {
          value: "61954800",
          label: '石门'
        }, {
          value: "61621800",
          label: '土地堂'
        }, {
          value: "61621900",
          label: '五里界'
        }
      ]
    };
  },
  watch : {
    value1 : function(val, oldval) {
      if (val == 1) {
        this.options2 = [
          {
            value: "61620400",
            label: '嘉鱼'
          }, {
            value: "61621200",
            label: '常收畈'
          }, {
            value: "61625000",
            label: '厦铺'
          },
          {
            value: "61607850",
            label: '横石'
          }, {
            value: "61627000",
            label: '万家'
          }, {
            value: "61737000",
            label: '沙墩'
          },
          {
            value: "61738000",
            label: '路口'
          }, {
            value: "61745000",
            label: '埠头'
          }, {
            value: "61745500",
            label: '黄沙'
          },
          {
            value: "61746500",
            label: '王家庄'
          }, {
            value: "61747500",
            label: '余码头'
          }, {
            value: "61748000",
            label: '柏墩'
          },
          {
            value: "61749500",
            label: '大桥'
          }, {
            value: "61750000",
            label: '十好桥'
          }, {
            value: "61751500",
            label: '三洲'
          },
          {
            value: "61752500",
            label: '金口'
          }, {
            value: "0",
            label: '南川水库'
          }, {
            value: "61749000",
            label: '四门楼'
          },
          {
            value: "61751000",
            label: '贺胜桥'
          }, {
            value: "61752000",
            label: '法泗洲'
          },
          {
            value: "61954800",
            label: '石门'
          }, {
            value: "61621800",
            label: '土地堂'
          }, {
            value: "61621900",
            label: '五里界'
          }
        ];
      } else if (val == 2) {
        this.options2 = [
          {
            value: "61607850",
            label: '横石'
          }, {
            value: "61711000",
            label: '余码头'
          }, {
            value: "61713000",
            label: '十好桥'
          }, {
            value: "61716000",
            label: '金口'
          }
        ]
      } else if (val == 3) {
        this.options2 = [
          {
            value: "61712000",
            label: '王家庄'
          }, {
            value: "61713000",
            label: '十好桥'
          }, {
            value: "61716010",
            label: '金口'
          }, {
            value: "61714000",
            label: '三洲'
          }
        ]
      }
    }
  }
};
</script>

<style scoped>

</style>
